<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TdG3lrRScvWOZDTj80RytM1qhz8wWo1f"></script>
        <title>作业</title>
        </head>
        <body>
        <div id="allmap"></div>
        </body>
        </html>
        <script type="text/javascript">
        
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);


        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var data = JSON.parse(xhr.responseText);
                console.log(data.itemsCity);
                var p1 = new BMap.Point(data.itemsCity[0].longitude,data.itemsCity[0].latitude);
                var p2 = new BMap.Point(data.itemsCity[3].longitude,data.itemsCity[3].latitude);
                
                var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                driving.search(p1, p2);
            }
        }
        xhr.open('GET','https://www.easy-mock.com/mock/5d0de4f2b596d756a7afd9fb/TS/geographyGrid');
        xhr.send();
        
        // var p1 = new BMap.Point(116.301934,39.977552);
        // var p2 = new BMap.Point(116.508328,39.919141);
        
        // var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
        // driving.search(p1, p2);
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        </script>